<template>
    <div class="accounting">
        <div class="nav-bar" :style="{ top: AppNavShow ? '3.5rem' : 0 }">
            <nuxt-link to="/user" class="left">
                <van-icon name="arrow-left" color="#000000" size="1.5rem" />
            </nuxt-link>
            <div class="centent">个人资料</div>
            <div class="right"></div>
        </div>
        <div v-if="userInfo" class="cell" @click="dAPP">
            <van-cell title="头像" is-link>
                <template #default>
                    <img :src="userInfo.avatar" alt="" class="avatar" />
                </template>
            </van-cell>
            <van-cell title="手机号码">
                <template #default>
                    {{ userInfo.mobile }}
                </template>
            </van-cell>
            <van-cell title="昵称" is-link>
                <template #default>
                    <div class="text">
                        {{ userInfo.nickname }}
                    </div>
                </template>
            </van-cell>
            <van-cell title="个人介绍" is-link>
                <template #default>
                    <div class="text">
                        {{ userInfo.bio }}
                    </div>
                </template>
            </van-cell>
            <van-cell title="邮箱" is-link>
                <template #default>
                    <div class="text">
                        {{ userInfo.email }}
                    </div>
                </template>
            </van-cell>
        </div>
    </div>
</template>

<script>
import { ImagePreview, Dialog } from "vant";
import { mapState } from "vuex";
import { downLoadAPP } from "@/assets/utils/utils.js";
export default {
    async asyncData({ params, query }) {
        let data = {};

        return data;
    },

    head() {
        return {
            title: "个人中心-【小竹财税平台】",
            meta: [],
        };
    },
    layout: "home",
    components: {},
    data() {
        return {};
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
            AppNavShow: (state) => state.AppNavShow,
        }),
    },
    created() {},
    mounted() {},
    watch: {},
    methods: {
        dAPP() {
            downLoadAPP();
        },
    },
};
</script>

<style lang="scss" scoped>
.nav-bar {
    width: 100%;
    position: sticky;
    background-color: #ffffffff;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    height: 2.75rem;
    .left,
    .right {
        width: 15%;
    }

    .centent {
        font-weight: 600;
        font-size: 1.31rem;
        color: #333333;
    }
}
.accounting {
    min-height: 100vh;
    background: #fafafa;
}

.cell {
    width: 90%;
    margin: 1rem auto 0;
    background-color: #ffffffff;
    position: relative;
    z-index: 100;
}

::v-deep .van-cell {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

::v-deep .van-cell__left-icon {
    position: relative;
    top: 0.2rem;
    left: -0.2rem;
}

.avatar {
    height: 1.93rem;
    width: 1.93rem;
    border-radius: 1.93rem;
    object-fit: cover;
}

.text {
    white-space: nowrap; /* 防止文本换行 */
    overflow: hidden; /* 隐藏超出元素框的内容 */
    text-overflow: ellipsis; /* 当内容溢出时显示省略号 */
}
</style>